<template>
   <!--引入 cateGorymenu 传参-->
   <cateGorymenu></cateGorymenu>
   <div class="container container--zone">
      <div class="region region--full">
        <comImg :imgData="imgData"></comImg>
      </div>
    </div>
   <div class='container container--zone'>
      <div class='region region--full removeLive'>
         <tabText :listlinkData='interList' :moreList='moreList' @tabChange="tabChange"></tabText>
         
      </div>
      <div class='region region--primary'>
         <pageHead :titleData='titleData'></pageHead>
         <inverTingContent :titleName='titleName' :topContData='topContData' v-if="isInver"></inverTingContent>
         <!--/ 第三开始内容主体部分 -->
         <timeTableMk :timeNewsData='timeNewsData' :titleTime='titleTime1' v-if="isTimeTable"></timeTableMk>
         <keyIndustries></keyIndustries>
         <timeTableMk :timeNewsData='timeNewsData1' :titleTime='titleTime2' v-if="timeNewsData1.length > 0">
         </timeTableMk>
         
      </div>
      <stickys :sticky="sticky"></stickys>
      <mastPopular></mastPopular>
      <div class='region region--primary'>
         <nationNew class='widthS' :usNewsData='usNewsData' style='margin-top:30px;' v-if="isNr"></nationNew>
         <nationNew class='widthS' :usNewsData='usNewsData1' style='margin-top:20px;' v-if="isL"></nationNew>
         <header class="header header--secondary" v-if="partTitle">
            <h2 class="title">
               <a class="link">{{ partTitle }}</a>
            </h2>
         </header>
         <futures :newsData='newsData' style='margin-bottom:20px;' :istime="false"
            v-if="isFeature && newsData.length > 0"></futures>
         <interactiveTools :toolData='toolData' :onMarketTool="onMarketTool"></interactiveTools>
         <header class="header header--secondary">
            <h2 class="title">
               <a class="link">{{ lastName }}</a>
            </h2>
         </header>
         <marketLine :lastMarketData="lastMarketData" v-if="topCont1 && lastMarketData.length > 0"></marketLine>
         <cryptoTracket></cryptoTracket>
         <tickerName :tickerNameData='tickerNameData' v-if="tickerNameData.length > 0"></tickerName>
         <!-- <options></options> -->
         <keyIndusList></keyIndusList>
      </div>
      <stickys :sticky="sticky"></stickys>
      <adverTiseMent></adverTiseMent>
   </div>

</template>
<script setup>
import cateGorymenu from '../latestNews/cateGorymenu/cateGorymenu.vue';
import tabText from '../../components/tabText/tabText.vue';
import pageHead from '../../components/pageHead/pageHead.vue';
import inverTingContent from './inverTingContent/inverTingContent.vue';
import timeTableMk from '../market/timeTableMk/timeTableMk.vue';
import keyIndustries from './keyIndustries/keyIndustries.vue';
import mastPopular from '../home/mastPopular/mastPopular.vue';
import nationNew from '../market/nationNew/nationNew.vue';
import interactiveTools from '../market/interactiveTools/interactiveTools.vue';
import { useinteringArrays } from '../../api/interving';
import cryptoTracket from './cryptoTracket/cryptoTracket.vue';
import tickerName from '../market/ticketName/tickerName.vue';
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
import keyIndusList from './keyIndusList/keyIndusList.vue';
import futures from './futures/futures.vue';
import adverTiseMent from '../home/adverTisement/adverTiseMent.vue';
import marketLine from '../market/marketLine/marketLine.vue'
import homeRequest from "@/api/home.js";
import { useRoute } from 'vue-router'
const route = useRoute()
const { moreList, latestData, districtData } = useinteringArrays()
const titleData = reactive({
   title: 'Investing',
   link: 'Home',
   name: 'Investing',
   name1: ''
})
const titleName = reactive({
   name: '',
   info: 'News and analysis to help investors make crucial decisions'
})
const titleName1 = reactive({
   name: '',
   info: ''
})
const rightContData1 = ref([])
const topCont1 = ref(false)
const topContData = ref({})
const timeNewsData = ref([])
const onMarketTool = reactive([])  //通过此判断来是否显示
const titleTime1 = reactive({})
const titleTime2 = reactive({
   title: '',
   name: 'The latest headlines from Newswires.'
})
const isTextBc = ref(false)
const isInver = ref(false)
const isTimeTable = ref(false)  //一个单独控制一个组件的显示
const popularData = ref([])
const nationName = ref("")
const usNewsData = ref([])
const isNr = ref(false)

const nationName1 = ref("")
const usNewsData1 = ref([])
const isL = ref(false)
const newsData = ref([])
const isFeature = ref(false)
const partTitle = ref('')
const toolData = reactive({
   h2: 'Get top mutual funds and ETF stories sent to your inbox',
   isshow: false,
   cont: "Sign up for Sinopoly Watch's free newsletter Mutual Funds Weekly - a roundup of the week's top mutual funds and ETF stories. Delivered on Thursdays."
})


const timeNewsData1 = ref([])
const timeNewsAuthor = ref('')
const interList = ref([])
const lastMarketData = ref([])
const lastName = ref('')
const tabKey = ref('')
onMounted(async () => {
   // 刷新时保持数据
   let name = window.sessionStorage.getItem('titleData')
   if (name) {
      titleData.title = JSON.parse(name).typeName
      titleData.name1 = titleData.title
      tabKey.value = JSON.parse(name).typeKey
   }
   const data = localStorage.getItem('tabMdData')
   interList.value = JSON.parse(data).investing
   interList.value.forEach((item) => {
      if (item.typeName === 'Investing') {
         item.path = '/inverting'
         titleData.title = item.typeName
         titleData.name1 = titleData.title
         tabKey.value = item.typeKey
      } else if (item.typeName === 'FA Center') {
         item.path = '/inverting/facenter'
      } else if (item.typeName === "Barron's") {
         item.path = '/inverting/barrons'
      } else if (item.typeName === "Earnings") {
         item.path = '/inverting/earnings'
      } else if (item.typeName === "Stocks") {
         item.path = '/inverting/stocks'
      } else if (item.typeName === "Funds") {
         item.path = '/inverting/funds'
      } else if (item.typeName === "ETFs") {
         item.path = '/inverting/etfs'
      } else if (item.typeName === "Bonds") {
         item.path = '/inverting/bonds'
      } else if (item.typeName === "Futures") {
         item.path = '/inverting/futures'
      } else if (item.typeName === "Crypto") {
         item.path = '/inverting/crypto'
      } else if (item.typeName === "FX") {
         item.path = '/inverting/fx'
      } else if (item.typeName === "IPOs") {
         item.path = '/inverting/ipos'
      } else if (item.typeName === "Cannabis") {
         item.path = '/inverting/cannabis'
      } else if (item.typeName === "Tech") {
         item.path = '/inverting/tech'
      }
   })
   await getNewList(tabKey.value)
   await getGroupList(tabKey.value)
   await getTickList(tabKey.value)
})
const tabChange = (data) => {
   // 点击Tba切换时存数据
   window.sessionStorage.setItem('titleData', JSON.stringify(data))
   titleData.title = data.typeName
   titleData.name1 = titleData.title
   tabKey.value = data.typeKey
}
//请求数据 获取新闻
const getNewList = (tabkey) => {
   let data = {
      current: 1,
      size: 50,
      isImg: 1,
      key: tabkey
   }
   homeRequest.newsData(data)
      .then((res) => {
         if (res.code === 0) {
            // 头部第一部分
            const headline = res.data.records[0].title
            const img = res.data.records[0].imgUrl
            const rightContData = res.data.records.slice(1, 5)
            topContData.value = {
               headline: headline,
               src: img,
               uuid: res.data.records[0].uuid,
               author: res.data.records[0].author,
               rightContData: rightContData,
               smallTwoImg: []
            }
            isInver.value = true  //一个只能控制自己的
            if (res.data.records.length > 20) {
               timeNewsData.value = res.data.records.slice(5, 20)
            } else {
               timeNewsData.value = res.data.records.slice(5, res.data.records.length)
            }
            isTimeTable.value = true
         }
      })
      .catch((e) => {
      });
}
const getGroupList = (tabkey) => {
   let data = {
      key: tabkey  //当前页面
   }
   homeRequest.getgroupData(data)
      .then((res) => {
         if (res.code === 0) {
            // 第一个模块部分
            if (res.data.ap !== null) {
               timeNewsAuthor.value = res.data.ap.author
               timeNewsData1.value = res.data.ap.news
               titleTime2.title = res.data.ap.author
            } else {
               timeNewsData1.value = []
            }
            // 第二个模块部分
            if (res.data.auto !== null) {
               nationName.value = res.data.auto.author
               usNewsData.value = res.data.auto
            } else {
               usNewsData.value = []
            }
            isNr.value = true
            // 第三部分
            if (res.data.bs !== null) {
               nationName1.value = res.data.bs.author
               usNewsData1.value = res.data.bs
            } else {
               usNewsData1.value = []
            }
            isL.value = true
            // 第四部分
            if (res.data.cl !== null) {
               partTitle.value = res.data.cl.author
               newsData.value = res.data.cl.news
            } else {
               newsData.value = []
            }
            isFeature.value = true
            // 第五部分
            if (res.data.djn !== null) {
               lastMarketData.value = res.data.djn.news
               lastName.value = res.data.djn.author
            } else {
               lastMarketData.value = []
            }
            topCont1.value = true
         }
      })
}
// 股票接口 
const tickerNameData = ref([])
const getTickList = (tabKey) => {
   let data = {
      key: tabKey  //当前页面
   }
   homeRequest.getTicketData(data)
      .then((res) => {
         tickerNameData.value = res.data
      })
}
</script>
<style scoped lang='scss'></style>